<template>
  <div class="flex flex-col items-center justify-center py-20 text-gray-500">
    <div class="relative">
      <div class="w-16 h-16 border-4 border-gray-200 border-t-indigo-500 rounded-full animate-spin mb-6" />
      <div class="absolute inset-0 w-16 h-16 border-4 border-transparent border-r-purple-400 rounded-full animate-spin animate-reverse" style="animation-delay: 0.5s;"></div>
    </div>
    <p class="text-xl font-medium text-gray-700 mb-2">{{ message }}</p>
    <p class="text-sm text-gray-400">请稍候，精彩内容即将呈现...</p>
  </div>
</template>

<script setup lang="ts">
interface Props {
  message?: string
}

withDefaults(defineProps<Props>(), {
  message: '加载中...'
})
</script>
